<template>
	<view>
		<view class="search-bar" v-if="showSearchBar">
			<view class="cu-bar search bg-white ">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="searchBarFocus" @blur="serachBarBlur" :adjust-position="false" type="text"
						v-model="searchVal" :placeholder="placeholder" confirm-type="search" />
				</view>
				<view class="action" v-if="searchVal">
					<button class="cu-btn bg-blue shadow-blur round margin-right-xs" @click="toSearch">搜索</button>
				</view>
				<view class="action" v-else>
					<button class="cu-btn bg-blue shadow-blur round margin-right-xs" v-if="showAdd"
						@click="clickAddButton">添加</button>
					<button class="cu-btn bg-blue shadow-blur round" @click="$refs.bxList.onRefresh()"><text
							class="cuIcon-refresh"></text></button>
				</view>
			</view>
			<view style="height: auto;width: 100%;display: flex;margin-left: 10px;padding: 10px 0;"
				v-if="establish.length>0" @click="ectabClick()">
				<view v-for="(item,index) in establish" :key='index' style="display: flex;">
					<view class="lastestab" v-if="index==(establish.length-1)">
						<view style="font-size: 15px;margin-top: 5px;">查看所有节点：</view>
						<view class="allnodes">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<bx-list ref="bxList" :serviceName="serviceName" :condition="condition" :relation_condition="relation_condition"
			:pageType="pageType" :listType="'list'"
			:rowButtons="listConfig && listConfig.rowButton ? listConfig.rowButton : []" :showTab="false"
			:viewTemp="viewTemp" :listConfig="listConfig" :showButton="showRowButton" :fixed="true" :top="listTop"
			:searchWords="searchVal" :searchColumn="keyColumn" :tempWord="tempWord" :rownumber="10"
			:showFootBtn="showFootBtn" @click-list-item="clickItem" @list-change="listChange"
			@clickFootBtn="clickFootBtn" @loadEnd="loadEnd" :showBtn="showBtn" v-if="listConfig"></bx-list>
		<!-- 		<view class="public-button-box">
			<view class="add-button" @click="clickAddButton" v-if="showAdd"></view>
		</view> -->

		<u-popup mode="bottom" v-model="show" border-radius="14" :closeable=true>
			<view class="content">
				<scroll-view scroll-y="true" style="height: auto;">
					<view>
						<view v-for="(item,index) in establish" :key='index' style="display: flex;">
							<view style="padding-top: 10px;display: flex;" @click="dotClick(item,index)">
								<view class="dot" style=" background: red;"><view style="margin-top: 8px;" v-if="index!==(establish.length-1)">|</view></view>
								<view style="margin-left: 10px;">
									{{item.label}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 	<view class="confrim-btn">
					<u-button @click="show = false;">确定</u-button>
				</view> -->
			</view>
		</u-popup>

	</view>
</template>

<script>
	import bxList from '@/components/bx-list/bx-list.vue';
	export default {
		components: {
			bxList
		},

		data() {
			return {
				show: false,
				serviceName: '',
				pageType: '',
				placeholder: '输入搜索关键词',
				listConfig: null,
				srv_cols: [],
				condition: [],
				relation_condition: null,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				fabContent: [],
				fabHorizontal: 'left',
				fabVertical: 'bottom',
				fabDirection: 'horizontal',
				listTop: 100,
				showRowButton: 'true',
				viewTemp: {
					// title: 'name',
					// tip: 'desc',
					// img: 'img',
					// price: 'current_price',
					// footer: 'shop_name'
				},
				publicButton: [],
				searchVal: '',
				keyColumn: '',
				showAdd: false,
				noData: false,
				showSearchBar: true,
				showFootBtn: true,
				tempWord: {},
				queryParams: {},
				queryOption: {},
				navigationBarTitle: null,
				showNavBack: false,
				showBtn: [{
					"page_type": "树形列表",
					"button_name": "+查看下级",
					"button_type": "seechild",
					"service_name": "srvoa_project_track_add",
					// "service_view_name": "项目需求目标增加",
					"always_show": false,
					"permission": true,
					"client_type": "PC,APP",
					"tip_msg": null,
					"biz_authority_cfg": null,
					"application": "oa",
					"is_public": true,
					"id": 'seechild',
					"page_area": "表格行按钮",
					"more_config": null,
					"seq": 50,
					"disp_exps": null
				}],
				establish: [],
				parent_no: null
			};
		},

		onReachBottom() {
			if (!this.noData) {
				this.$refs.bxList.pageInfo.pageNo++;
				this.$refs.bxList.getListData().then(data => {});
			}
		},
		onPullDownRefresh() {
			if (this.serviceName && this.$refs.bxList) {
				// this.getListV2();
				this.$refs.bxList.onRefresh();
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow() {
			if (this.serviceName && this.$refs.bxList) {
				// this.getListV2();
				this.$refs.bxList.onRefresh();
			}
		},

		onLoad(option) {
			if (option.establish) {
				try {
					this.establish = JSON.parse(option.establish)
					console.log(this.establish)
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}

			}
			console.log(option)
			if (option.parent_no) {
				this.parent_no = option.parent_no
				// this.condition = [{
				// 	colName: "parent_no",
				// 	ruleType: "eq",
				// 	value: option.parent_no
				// }]
			} else {
				// this.condition = [{
				// 	colName: "parent_no",
				// 	ruleType: "isnull"
				// }]
			}
			let query = {};
			// #ifdef H5
			this.listTop = 100;
			if (option.query) {
				query = JSON.parse(decodeURIComponent(option.query));
			} else {
				query = option;
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (option.serviceName) {
				query = option;
			} else {
				query = JSON.parse(decodeURIComponent(option.query));
			}
			if (option.navigationBarTitle) {
				this.navigationBarTitle = option.navigationBarTitle;
				uni.setNavigationBarTitle({
					title: option.navigationBarTitle
				});
			}
			// #endif
			// #ifdef APP-PLUS
			query = option
			// #endif
			if (option.hasOwnProperty('showAdd')) {
				this.queryOption = option;
			}
			if (query.viewTemp) {
				// let viewTemp = this.getDecodeUrl(option.viewTemp);
				this.viewTemp = JSON.parse(query.viewTemp);
				if (this.viewTemp.title) {
					this.keyColumn = this.viewTemp.title;
				}
				if (query.destApp) {
					uni.setStorageSync('activeApp', query.destApp);
				}
			}
			this.showNavBack = query.showNavBack || false
			if (query.cond) {
				try {
					let cond = JSON.parse(decodeURIComponent(query.cond));
					if (Array.isArray(cond)) {
						cond.forEach(item => {
							if ((item.colName === 'create_user' || item.colName === 'openid' || item.colName ===
									'glry') && item.value === 'user_no') {
								item.value = uni.getStorageSync('login_user_info').user_no;
							}
						});
						this.condition = cond;
					}
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
				// this.condition = JSON.parse(this.getDecodeUrl(option.cond));
			}
			if (query.relation_condition) {
				try {
					let cond = JSON.parse(decodeURIComponent(query.relation_condition));
					if (Array.isArray(cond.data)) {
						cond.data.forEach(item => {
							if ((item.colName === 'create_user' || item.colName === 'openid' || item.colName ===
									'glry') && item.value === 'user_no') {
								item.value = uni.getStorageSync('login_user_info').user_no;
							}
						});
						this.relation_condition = cond;
					}
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			}

			if (query.tempWord) {
				this.tempWord = JSON.parse(query.tempWord);
			}
			if (query.showRowButton) {
				this.showRowButton = query.showRowButton;
			}
			if (query.serviceName && query.pageType) {
				this.serviceName = query.serviceName;
				this.pageType = query.pageType;
				if (query.params) {
					let params = {};
					if (typeof query.params === 'string') {
						try {
							params = JSON.parse(query.params);
							this.queryParams = params;
						} catch (e) {
							//TODO handle the exception
						}
					}
				}
				this.getListV2();
			} else {
				// uni.showToast({
				// 	title:"无效页面",
				// 	icon:"Error"
				// })
				// setTimeout(()=>{
				// 	uni.hideToast()
				// 	uni.navigateBack()
				// },2000)
			}
		},
		methods: {
			removeByValue(arr, attr, value) {
				var index = 0;
				for (var i in arr) {
					if (arr[i][attr] == value) {
						index = i;
						break;
					}
				}
				// arr.splice(index, 1);
			},
			dotClick(e, index) {
				this.show = false
				if (index !== 0) {
					uni.navigateBack({
						delta: this.establish.length - index
					})
				} else {
					uni.navigateTo({
						url: `/pages/public/treeList/treeList?serviceName=${this.serviceName}&pageType=list`
					});
				}
			},
			ectabClick(e, index) {
				this.show = true
			},
			toSearch() {
				let keywords = this.searchVal;
				this.$refs.bxList.toSearch();
			},
			loadEnd(e) {
				this.noData = true;
			},
			clickAddButton() {
				if (this.pageType === 'proc') {
					this.publicButton.map(item => {
						if (item.button_type === 'add' || item.button_type === 'apply') {
							uni.navigateTo({
								url: '/pages/public/proc/apply/apply?serviceName=' + item.service_name +
									'&cond=' + decodeURIComponent(JSON.stringify(this.condition))
							});
						}
					});
				} else {
					this.publicButton.map(item => {
						if (item.button_type === 'add') {
							if (this.establish !== []) {
								let routes = getCurrentPages();
								let curParam = routes[routes.length - 1].options
								console.log(curParam)
								var a = {
									[this.listConfig.parent_no_col]: curParam.parent_no
								}
								let params = {
									type: 'add',
									serviceName: curParam.serviceName,
									defaultVal: a,
								};
								uni.navigateTo({
									url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
								});
							} else {
								const params = {
									type: 'add',
									condition: this.condition,
									serviceName: item.service_name,
									service_view_name: item.service_view_name
								};
								uni.navigateTo({
									// url: '../formPage/formPage?serviceName=' + item.service_name +
									// 	'&type=add&cond=' + decodeURIComponent(JSON.stringify(this.condition))
									url: '../formPage/formPage?serviceName=' + item.service_name +
										'&type=add&params=' + decodeURIComponent(JSON.stringify(params))
								});
							}

						} else if (item.button_type === 'customize') {}
					});
				}
			},
			searchBarFocus(e) {
				console.log('searchBarFocus:', e);
			},
			serachBarBlur(e) {
				console.log('serachBarBlur:', e);
			},
			listChange(e) {
				console.log('listChange:', e);
			},
			clickItem(e) {
				if (this.pageType === 'proc') {
					uni.navigateTo({
						url: '/pages/public/proc/procDetail/procDetail?proc_instance_no=' + e.proc_instance_no
					});
				} else {
					let req = {
						button: {
							button_name: '详情',
							button_type: 'detail',
							service_name: this.serviceName
						},
						row: e
					};
					uni.navigateTo({
						url: `/pages/public/detail/detail?id=${e.id}&serviceName=${this.serviceName}`
					})
					try {
						// this.onButtonToUrl(req)
					} catch (e) {
						//TODO handle the exception
					}
				}
				console.log('click-list-item:', e);
			},
			async clickFootBtn(data) {
				let buttonInfo = this.deepClone(data.button);
				let rowData = this.deepClone(data.row);
				console.log(buttonInfo)
				if (buttonInfo.operate_params && typeof buttonInfo.operate_params === 'string') {
					try {
						buttonInfo.operate_params = JSON.parse(buttonInfo.operate_params);
						if (Array.isArray(buttonInfo.operate_params.condition) && buttonInfo.operate_params.condition
							.length > 0) {
							buttonInfo.operate_params.condition.forEach(cond => {
								if (typeof cond.value === 'object' && cond.value.value_type === 'rowData') {
									cond.value = data.row[cond.value.value_key];
								} else if (typeof cond.value === 'object' && cond.value.value_type ===
									'constant') {
									cond.value = cond.value.value;
								}
							});
						}
						if (buttonInfo && buttonInfo.operate_params && buttonInfo.operate_params.data && Array.isArray(
								buttonInfo.operate_params.data) && buttonInfo.operate_params.data.length >
							0) {
							buttonInfo.operate_params.data.forEach(data => {
								if (typeof data === 'object') {
									Object.keys(data).forEach(item => {
										if (typeof data[item] === 'object' && data[item].value_type ===
											'rowData') {
											data[item] = rowData[data[item].value_key];
										} else if (typeof data[item] === 'object' && data[item]
											.value_type === 'constant') {
											data[item] = data[item].value;
										}
									});
								}
							});
						}
						if (buttonInfo.operate_type === '操作' && buttonInfo.operate_mode === '静默操作') {
							let req = [{
								serviceName: buttonInfo.operate_service,
								condition: buttonInfo.operate_params.condition,
								data: buttonInfo.operate_params.data
							}];
							let app = uni.getStorageSync('activeApp');
							let url = this.getServiceUrl(buttonInfo.application ? buttonInfo.application : app,
								buttonInfo.operate_service, buttonInfo.servcie_type);
							let res = await this.$http.post(url, req);
							if (res.data.state === 'SUCCESS') {
								this.$refs.bxList.onRefresh();
							}
						} else if (buttonInfo.operate_type === '更新弹出') {
							let params = {
								type: buttonInfo.servcie_type,
								serviceName: buttonInfo.operate_service,
								main_table: buttonInfo.main_table,
								service: buttonInfo.service,
								button_type: buttonInfo.button_type,
							};
							if (Array.isArray(buttonInfo.operate_params.data) && buttonInfo.operate_params.data
								.length > 0) {
								params.defaultVal = buttonInfo.operate_params.data[0]
							}
							uni.navigateTo({
								url: '/pages/public/formPage/formPage?serviceName=' +
									buttonInfo.operate_service +
									'&type=' +
									buttonInfo.servcie_type +
									'&params=' + JSON.stringify(params) +
									'&cond=' +
									decodeURIComponent(JSON.stringify(buttonInfo.operate_params.condition))
							});
						}
					} catch (e) {
						console.error(e);
						//TODO handle the exception
					}
				}

				if (this.pageType === 'proc') {
					if (data.button && data.button.button_type === 'edit' && data.row.proc_instance_no) {
						uni.navigateTo({
							url: '/pages/public/proc/procDetail/procDetail?proc_instance_no=' + data.row
								.proc_instance_no
						});
					}
				} else {
					this.onButtonToUrl(data).then(res => {
						if (data.button && data.button.button_type === 'delete') {
							if (res.state === 'SUCCESS') {
								this.$refs.bxList.onRefresh();
							} else {
								uni.showToast({
									title: res.resultMessage,
									icon: 'none'
								})
							}
						}
						if (data.button && data.button.button_type === 'detail') {
							let row = res.row;
							let btn = res.button;
							let params = {
								type: 'detail',
								condition: [{
									colName: 'id',
									ruleType: 'in',
									value: row.id
								}],
								serviceName: btn.service_name,
								defaultVal: row
							};
							uni.navigateTo({
								url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
							});
						} else if (data.button && (data.button.button_type === 'duplicate' || data.button
								.button_type === 'duplicatedeep')) {
							let fieldsCond = []
							if (Array.isArray(self.condition)) {
								self.condition.forEach(item => {
									fieldsCond.push({
										column: item.colName,
										value: item.value,
										display: false
									})
								})
							}

							let params = {
								type: 'add',
								serviceName: res.button.service_name,
								defaultVal: res.row,
								eventOrigin: res.button
							};
							Object.keys(params.defaultVal).forEach(key => {
								if (['id', 'modify_user_disp', 'modify_user', 'modify_time',
										'create_user_disp', 'create_user', 'create_time'
									].includes(key) || !params.defaultVal[key]) {
									delete params.defaultVal[key]
								}
							})
							uni.navigateTo({
								url: '/pages/public/formPage/formPage?params=' + JSON.stringify(
									params)
							});

						} else if (data.button.servcie_type === 'select') {
							let params = {
								type: 'select',
								serviceName: res.button.service_name,
								defaultVal: res.row,
								eventOrigin: res.button
							};
						} else if (data.button.servcie_type === 'add') {
							let params = {
								type: 'add',
								serviceName: res.button.service_name,
								defaultVal: res.row,
								eventOrigin: res.button
							};
							uni.navigateTo({
								url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
							});
						} else if (data.button && data.button.button_type === 'addchild') {
							var a = {
								[this.listConfig.parent_no_col]: rowData[this.listConfig.no_col]
							}
							let params = {
								type: 'add',
								serviceName: res.button.service_name,
								defaultVal: a,
								eventOrigin: res.button
							};
							uni.navigateTo({
								url: '/pages/public/formPage/formPage?params=' + JSON.stringify(params)
							});
						} else if (data.button && data.button.button_type === 'seechild') {
							let params = {
								label: rowData[this.listConfig.key_disp_col],
								value: rowData[this.listConfig.no_col]
							};

							const establish = this.deepClone(this.establish)
							establish.push(params)
							uni.navigateTo({
								url: `/pages/public/treeList/treeList?serviceName=${this.serviceName}&pageType=list&parent_no=${params.value}&establish=${JSON.stringify(establish)}`
							});

						} else if (data.button && data.button.operate_type === '流程申请') {
							uni.navigateTo({
								url: '/pages/public/proc/apply/apply?serviceName=' + data.button
									.operate_service
							});
						} else if (data.button && data.button.button_type === 'customize') {
							let moreConfig = data.button.more_config;
							console.log(buttonInfo, rowData)
							if (moreConfig && typeof moreConfig === 'string') {
								try {
									moreConfig = JSON.parse(moreConfig);
								} catch (e) {
									//TODO handle the exception
									console.log(e);
								}
							}
							if (data.button?.button_name === '支付码') {
								// 跳转到下单、生成支付码页面
								uni.navigateTo({
									url: `/pages/public/payCode/payCode?id=${data.row.id}`
								})
								return
							} else if (data.button?.button_name === '填写问卷') {
								uni.navigateTo({
									url: `/pages/specific/quest/quest?id=${data.row.id}`
								})
								return
							}
							// let params = {
							// 	type: data.button.servcie_type,
							// 	serviceName: res.button.service_name,
							// 	defaultVal: res.row,
							// 	eventOrigin: res.button
							// };
							let params = {
								type: buttonInfo.servcie_type,
								serviceName: buttonInfo.operate_service,
								main_table: buttonInfo.main_table,
								service: buttonInfo.service,
								button_type: buttonInfo.button_type,
							};
							if (buttonInfo && buttonInfo.operate_params && buttonInfo.operate_params.data &&
								Array.isArray(buttonInfo.operate_params.data) && buttonInfo.operate_params.data
								.length > 0) {
								params.defaultVal = buttonInfo.operate_params.data[0]
							}
							let url = ''
							switch (buttonInfo.servcie_type) {
								case 'add':
									url = `/pages/public/formPage/formPage?params=${JSON.stringify(params)}`
									break;
								case 'operate':

									break;
							}
							switch (buttonInfo.operate_type) {
								case '列表弹出':
									let cond = buttonInfo.operate_params.condition
									if (Array.isArray(cond)) {
										url =
											`/pages/public/list/list?pageType=list&serviceName=${buttonInfo.operate_service}&cond=${JSON.stringify(cond)}`
									}
									break;
								case 'URL跳转':
									if (buttonInfo.pre_data_handle) {
										// #ifdef H5
										let arr = []
										arr.push(rowData)
										let result = eval("var fun=" + buttonInfo.pre_data_handle +
											"(arr); fun")
										if (result) {
											let url = result.slice(result.indexOf('/pages/'))
											uni.navigateTo({
												url
											})
										}
										// #endif
									}

									break;
								case 'operate':

									break;
							}
							if (params && url) {
								uni.navigateTo({
									url
								})
							}
						}
					});
				}
				console.log('clickFootBtn:', data, this.pageType);
			},
			async getListV2() {
				let app = uni.getStorageSync('activeApp');
				let self = this;
				let colVs = await this.getServiceV2(this.serviceName, 'list', this.pageType === 'proc' ? 'proclist' :
					'treelist', app);
				colVs.srv_cols = colVs.srv_cols.filter(item => item.in_list === 1 || item.in_list === 2);
				if (!this.navigationBarTitle) {
					uni.setNavigationBarTitle({
						title: colVs.service_view_name
					});
				}
				console.log('colVs', colVs);
				if (colVs.more_config) {
					try {
						colVs.moreConfig = JSON.parse(colVs.more_config)
					} catch (e) {
						//TODO handle the exception
					}
				}
				this.listConfig = colVs;
				if (this.parent_no) {
					this.condition = [{
						colName: colVs.parent_no_col,
						ruleType: "eq",
						value: this.parent_no
					}]
				} else {
					this.condition = [{
						colName: colVs.parent_no_col,
						ruleType: "isnull"
					}]
				}
				if (this.pageType === 'proc') {
					this.showFootBtn = false;
				}
				this.publicButton = colVs.gridButton.filter(item => {
					if (item.permission === true) {
						switch (item.button_type) {
							case 'add':
							case 'apply':
								this.showAdd = true;
								return item;
								break;
							case 'select':
								this.showSearchBar = true;
								// #ifdef MP-WEIXIN
								this.listTop = 100;
								// #endif
								return item;
								break;
							case 'customize':
								break;
						}
					}
				});
				return colVs;
			}
		}
	};
</script>

<style lang="scss">
	.add-button {
		position: fixed;
		bottom: 100upx;
		left: calc(50% - 50upx);
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background-color: #0bc99d;
		z-index: 100;

		&::before {
			position: absolute;
			width: 8upx;
			height: 60upx;
			left: calc(50% - 4upx);
			top: 20upx;
			content: '';
			background-color: #fff;
		}

		&::after {
			position: absolute;
			width: 60upx;
			height: 8upx;
			content: '';
			top: calc(50% - 4upx);
			left: 20upx;
			background-color: #fff;
		}

		&:active {
			transform: rotate(45deg);
			transition: all 0.2s;
		}
	}

	.search-bar {
		flex: 1;
	}

	.content {
		padding: 20px;
		text-align: center;
		font-size: 15px;
	}

	.dot {
		margin-top: 5px;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background: #ffff;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);

	}

	.lastestab {
		display: flex;

		.allnodes {
			background-color: #0081ff;
			color: #ffffff;
			padding: 5px 10px;
			border-radius: 3px;
		}
	}
</style>
